<template>
    <div class="mainContainers">
        <div class="monthData" id="monthData">数据展示1</div>
        <div class="yearData" id="yearData">数据展示2</div>
    </div>
</template>
<script lang="ts" setup>

    import axios from 'axios';
    import { reactive, ref, onMounted } from 'vue';
    import * as echarts from 'echarts';

    //发送异步请求
    onMounted(() => {
        
        const myChart1 = echarts.init(document.getElementById("monthData"));
        const myChart2 = echarts.init(document.getElementById("yearData"));
        
        const option1 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '小区各区域车位总数',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1048, name: '一区' },
                        { value: 735, name: '二区' },
                        { value: 580, name: '三区' },
                        { value: 486, name: '四区' },
                        { value: 300, name: '五区' }
                    ]
                }
            ]
        };
        const option2 = {
            legend: {
                top: 'bottom'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            series: [
                {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: [50, 250],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: [
                        { value: 40, name: '星期一' },
                        { value: 38, name: '星期二' },
                        { value: 32, name: '星期三' },
                        { value: 30, name: '星期四' },
                        { value: 28, name: '星期五' },
                        { value: 26, name: '星期六' },
                        { value: 22, name: '星期七' },
                        { value: 18, name: '星期八' }
                    ]
                }
            ]
        };
        
        myChart1.setOption(option1);
        myChart2.setOption(option2);
    })
</script>

<style>
    .mainContainers {
        width: 100%;
        height: 668px;
        /* background-color: burlywood; */
    }

    .monthData,
    .yearData {
        width: 50%;
        height: 668px;
        /* background-color: bisque; */
        float: left;
    }
</style>